*{
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
}

.web{
	.carouselBox{
		width: 1000px;
		height: 562px;
		border: 2px dashed red;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		overflow: hidden;
		ul{
			width: 100%;
			white-space: nowrap;
			font-size: 0;
			transition: all .3s;
			li{
				display: inline-block;
				width: 100%;
				img{
					width: 100%;
				}
			}
		}
		.arrow{
			width: 160px;
			height: 562px;
			text-align: center;
			line-height: 562px;
			font-size: 36px;
			position: absolute;
			top: 0;
			color: #fff;
			transition: all .3s;
			cursor: pointer;
		}
		.leftArrow{
			left: 0;
			background: linear-gradient(90deg,#000,transparent);
			transform: translateX(-100%);
		}
		.rightArrow{
			right: 0;
			background: linear-gradient(-90deg,#000,transparent);
			transform: translateX(100%);
		}
		&:hover .arrow{
			transform: translateX(0%);
		}
		.pointBox{
			position: absolute;
			bottom: -100px;
			left: 50%;
			transform: translateX(-50%);
			text-align: center;
			font-size: 0;
			transition: all .3s;
			ol{
				display: inline-block;
				white-space: nowrap;
				background-color: #87ceeb;
				border-radius: 50% 0%;
				padding: 12px 8px;
				li{
					width: 10px;
					height: 10px;
					display: inline-block;
					background-color: #fff;
					margin: 0 8px;
					cursor: pointer;
					border-radius: 50%;
				}
				.active{
					background-color: orange;
				}
			}
		}
		&:hover .pointBox{
			bottom:30px;
		}
		
	}
}